<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: -;
			}
			
			.left{
				width: 40%;
				height: 500px;
				background: skyblue;
				float: left;
			}
			
			.right{
				width: 60%;
				height: 500px;
				background: pink;
				float: right;
				margin-left: 1px;
			}
			
			/*
			 浮动
			 
			 任何元素都可以浮动。
			 1. 让设置的元素往指定的方向移动，直到碰到父元素的边界或碰到其他浮动元素。
			 
			 2. 设置了浮动的元素，会丢失自己原来的能力。
			 
			 3. 获取到新的能力。 类似块级的所有特点(除了占一行)。
			 
			 4. 脱离了文档流(从左到右)脱离了地面，
			 * */
			
			.bgg{
				background: red;
			}
			
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="left">
			左边
		</div>
		<div class="right">
			右边
		</div>
		<!--
			查岗占一行
		-->
		
		<div class="clear"></div>
		<div class="bgg">
			查岗
		</div>
	</body>
</html>
